<template>
  <div class='table-page-search-wrapper'>
    <a-form layout='inline'>
      <a-row :gutter='24'>
        <a-col :xl='6' :lg='7' :md='8' :sm='24'>
          <a-form-item label=''>
            <a-input v-model='ext'></a-input>
          </a-form-item>
        </a-col>
        <a-col :xl='6' :lg='7' :md='8' :sm='24'>
          <a-space>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQueryTab' icon='search'>搜索</a-button>
            </span>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='clearQueryTab' icon=''>清除</a-button>
            </span>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'TslSimpleQuery',
  props:{
    dataSource:{
      type: Array,
      required: true
    },
    dataSourceBack: {
      type: Array,
      required: false
    },
    columns:{
      type: Array,
      required: true
    },
    ignoreColumns:{
      type: Array, // ["",""] 忽略的字段
      required: false,
      default: function() {
        return [];
      }
    }
  },
  components: {

  },
  data() {
    return {
      ext: '',
      dataSourceBak: [],
      targerColumns: [],
      strkey: '',
      searchColumns: ''
    }
  },
  created() {

  },
  mounted() {
    this.targerColumns = this.columns
    this.targerColumns.forEach(item=>{
      if(item.key!=='rowIndex' && item.key!=='action' &&  item.dataIndex!=='rowIndex' && item.dataIndex!=='action'){
        if(this.ignoreColumns.length>0){
          if(this.isStringNotInArray(item.key,this.ignoreColumns)){
            item.scopedSlots =  { customRender: 'htmlSlot'}
            this.searchColumns += item.dataIndex +","
          }
        }else {
          item.scopedSlots =  { customRender: 'htmlSlot'}
          this.searchColumns += item.dataIndex +","
        }
      }
    })
    this.$emit('initQueryColumns', this.targerColumns)
    this.initStrkey();
  },
  computed: {

  },
  methods:{
     isStringNotInArray(str, arr) {
        return !arr.includes(str);
     },
    searchQueryTab(){
      this.dataSourceBak = []
      // this.dataSourceBak = this.dataSource
      // this.dataSource = this.dataSourceBack
      let searchVar = this.ext
      let newDataSource = []
      if (searchVar && searchVar != '') {
        this.dataSource.forEach(obj => {
          let newObj = {}
          let shouldAdd = false
          Object.keys(obj).forEach(key => {
            // if(!this.strkey.includes(key)){
            //   return
            // }
            if (typeof obj[key] === 'string' && obj[key].includes(searchVar) && !this.strkey.includes(key) &&this.searchColumns.includes(key)) {
              newObj[key] = obj[key].replace(new RegExp(`(${searchVar})`, 'g'), '<span class="highlight">$1</span>')
              shouldAdd = true // Set flag to true if any property meets criteria
            } else {
              newObj[key] = obj[key]
            }
          })
          if (shouldAdd) {
            newDataSource.push(newObj)
          }
        })
        this.dataSourceBak.push(... newDataSource)
        this.$emit('initQueryColumns', this.targerColumns)
        this.$emit('searchQueryTab',{source: this.dataSourceBak,val: searchVar })
      }else {
        this.$emit('searchQueryTab',{source: this.dataSourceBak,val: searchVar })
      }
    },
    clearQueryTab(){
      this.ext = ''
      this.$emit('clearQueryTab')
    },
    initStrkey(){
      this.targerColumns.forEach(item=>{
        if(this.ignoreColumns.length > 0 && !this.isStringNotInArray(item.dataIndex,this.ignoreColumns)){
          this.strkey +=item.dataIndex +','
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
<style>
  .highlight {
    color: red;
  }

</style>